<script>
import {ref, inject, h, defineComponent } from 'vue'
import {NIcon} from 'naive-ui'
import { FlashOutline as searchIcon,
  PaperPlane as enterIcon,
  ChatboxEllipsesOutline as ChatboxEllipsesIcon,
  Glasses as GlassesIcon
} from "@vicons/ionicons5"
import headerCommunal from "@/components/communal/header-communal.vue";
import footerCommunal from "@/components/communal/footer-communal.vue";
import aiUtil from "@/components/utils/ai-util.vue";

export default defineComponent({
  name: "student-communal",
  components:{
    aiUtil, headerCommunal,footerCommunal
  },
  props:{
    option:{
      redirect:true,
    },
    action:{
      type:String
    },
    navKey:{
      type:String
    },
    core: {
      type: Boolean,
      default: true
    }
  },
  setup(props, { emit }){
    const {toPage} = inject('toPage')
    return{
      toPage,
      searchIcon,enterIcon,ChatboxEllipsesIcon,GlassesIcon,
      collapsed: ref(true),
    }
  }
})
</script>

<template>
<n-layout :native-scrollbar="false" class="layout" >
  <header-communal :action="action"/>
  <n-layout has-sider :native-scrollbar="false" class="layout-sider">
      <n-layout-sider
          class="layout-sider"
          bordered
          collapse-mode="width"
          :collapsed-width="64"
          width="15rem"
          :collapsed="collapsed"
          @mouseover="collapsed = false"
          @mouseleave="collapsed = true"
      >
        <n-menu
            v-model:value="navKey"
            mode="vertical"
            :collapsed="collapsed"
            :collapsed-width="64"
            :collapsed-icon-size="24"
            :options="option"
        />
      </n-layout-sider>
      <n-layout-content :native-scrollbar="false" :class="{core:core}">
        <n-card :bordered="false" style="margin-top: 1rem">
          <slot/>
        </n-card>
      </n-layout-content>
  </n-layout>
  <footer-communal/>
<!--  浮动按钮-->
  <n-flex class="float-btn">
    <slot name="float"/>
  </n-flex>
<!--  ai工具组件-->
  <ai-util/>
  <n-back-top :right="100" />
</n-layout>
</template>

<style lang="scss" scoped>
$gi:81px;
.sc-header{
  height: $gi;
  .sc-grid{
    height: $gi;
  }
}
.nav-title{
  //background: yellow;
  width: 10rem;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 21px;
  font-weight: bold;
  letter-spacing: 5px;
  &:hover{
    color: #1296db;
  }
  &:active{
    text-shadow: 2px 2px #f2f2f2;
    color: darken(#1296db,1.2);
  }
}
.nav-title-activate{
  color: #1296db;
}
.log-title{
  width: 10rem;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 36px;
  font-weight: bold;
  letter-spacing: 3px;
  text-shadow:2px 3px 1px pink;
}

.sc-footer{
  background: #000;
  color: #f2f2f2;
  ul{
    li:first-child{
      font-weight: bold;
    }
  }
}
.float-btn{
  position: absolute;
  display: flex;
  bottom: 3.6rem;
  right: 3.6rem;
  z-index: 12;
}
</style>
